<template>
  <div class="outermost">
    <!-- <div class="bg">
            <img alt="" src="~assets/zhitong/bg_step.png" width="100%">
        </div> -->
    <div class="tile">
      <div>
        车险推广
      </div>
      <div>
        赚取收益只需4步
      </div>
    </div>
    <flow>
      <flow-state state="1" title="注册" is-done></flow-state>
      <flow-line is-done></flow-line>
      <flow-state state="2" title="录单" is-done></flow-state>
      <flow-line is-done></flow-line>
      <!-- <flow-state state="3" title="分享" is-done></flow-state>
      <flow-line is-done></flow-line> -->
      <flow-state state="3" title="支付" is-done></flow-state>
      <flow-line is-done></flow-line>
      <flow-state state="4" title="提现" is-done></flow-state>
    </flow>

    <div class="bottom">
      <!-- placeholder-align="right" -->
      <!-- <x-button class="btn" type="primary" action-type="button" @click.native="goInsureCar" style="margin-bottom: 40px;">投保体验</x-button> -->
      <x-input class="btn input" title="称呼" placeholder="请输入称呼" v-model="nickName" :min="2" :max="StrLenth.nickNameMax" required>
        <img slot="label" style="padding-right:10px;display:block;" src="~assets/x3/ico/icon-name.png" width="18">
      </x-input>
      <x-input is-type="email" class="btn input" title="邮箱地址" placeholder="请输入邮箱地址" v-model="email" :min="3" :max="30" required>
        <img slot="label" style="padding-right:10px;display:block;" src="~assets/x3/ico/icon-email.png" width="18">
      </x-input>
      <x-input type="tel" class="btn input" placeholder="请输入手机号码" v-model="mobile" required>
        <img slot="label" style="padding-right:10px;display:block;" src="~assets/x3/ico/ico-input-linkMobile.png" width="18">
      </x-input>

      <x-input class="btn input" v-model="imgCode" :max="StrLenth.img" placeholder="请输入图形码" required>
        <img slot="label" style="padding-right:10px;padding-top:5px;display:block;" src="~assets/x3/ico/ico-input-img_code.png" width="18">
        <span slot="right" class="img__code--change" @click="changeImgCode()">换一张</span>
        <img slot="right" class="img__code" :src="imgCodeSrc" @click="changeImgCode()">
      </x-input>
      <!-- 短信验证码登录 -->
      <x-input class="btn input" type="tel" :max="StrLenth.sms" v-model="mobileCode" placeholder="请输入短信验证码" required>
        <img slot="label" style="padding-right:10px;padding-top:5px;display:block;" src="~assets/x3/ico/ico-input-Mcode.png" width="18">
        <x-button action-type="button" slot="right" mini class="linkMobileCode" @click.native="sendSmsCode" :text="sendBtnText" :disabled="isSendOk"></x-button>
      </x-input>
      <x-button class="btn" type="primary" action-type="button" @click.native="subForm">提交申请</x-button>
    </div>

    <toast v-model="showToast" type="warn" position="default" :time="2000">{{showToastText}}</toast>
  </div>
</template>

<script>
import { RequestUrl } from "src/common/url";
import Validation from "src/common/util/validation";
import { Mutations, RouteUrl, StrLenth } from "src/common/const";
import { Flow, FlowState, XInput, FlowLine, XButton, Toast } from "vux";
export default {
  components: { Flow, FlowState, FlowLine, XInput, XButton, Toast },
  data() {
    return {
      StrLenth: {}, //字符长度常量
      showToast: false, //提示信息
      showToastText: "", //提示信息
      nickName: "",//称呼
      email: "",//邮箱地址
      mobile: "",//手机号码
      mobileCode: "", //验证码
      isSendOk: false, //发送按钮是否禁用
      sendBtnText: "获取验证码", //发送按钮文本内容
      imgCodeSrc: RequestUrl.GET_VALIDATE_CODE, //验证码图片路径
      imgCode: "", //图形码
      errorMessage: "",
      haveError: false,
      // haveImgCode: true
    }
  },
  methods: {
    //路由到车险投保
    goInsureCar() {
      // window.location.href = RequestUrl.ZHI_TONG_INSURE
      alert("建设中……");
    },
    changeImgCode() {
      this.imgCodeSrc = RequestUrl.GET_VALIDATE_CODE + "?a=" + Math.random();
    },
    // 发送验证码
    sendSmsCode() {
      /**
        * 发送验证码,返回data.msg=信息,data.state=0表示成功
        * isSendOk,true=禁用(disabled=true)
        * sendBtnText,验证码按钮文本显示内容
        */
      //校验-图形码
      let msg = Validation.isImgCode(this.imgCode);
      if (msg != null) {
        this.showToastText = msg; this.showToast = true; return;
      }
      this.$common.sendSMS(this, this.mobile, this.imgCode, this.isSendOk, "申请合作");
    },
    //提交合作申请
    subForm() {
      let _this = this;
      let initData = {
        TYPE: "FORM",
        nickName: this.nickName,
        email: this.email,
        mobile: this.mobile,
        mobileCode: this.mobileCode,
        imgCode: this.imgCode,
      };
      //校验-称呼
      if (Validation.isEmpty(initData.nickName)) {
        _this.showToastText = "请输入称呼"; _this.showToast = true; return;
      }
      if (initData.nickName.length < 2) {
        _this.showToastText = "称呼名称过短"; _this.showToast = true; return;
      }
      if (initData.nickName.length > StrLenth.nickNameMax) {
        _this.showToastText = "称呼名称过长"; _this.showToast = true; return;
      }
      //校验-邮箱地址
      if (Validation.isEmpty(initData.email)) {
        _this.showToastText = "请输入邮箱地址"; _this.showToast = true; return;
      }
      if (!Validation.isEmail(initData.email.toLowerCase())) {
        _this.showToastText = "请输入正确的邮箱地址"; _this.showToast = true; return;
      }
      //校验-手机号
      let msg = Validation.isPhone11(initData.mobile);
      if (msg != null) {
        _this.showToastText = msg; _this.showToast = true; return;
      }
      //校验-图形码
      msg = Validation.isImgCode(initData.imgCode);
      if (msg != null) {
        _this.showToastText = msg; _this.showToast = true; return;
      }
      //校验-手机验证码
      msg = Validation.isSmsCode(initData.mobileCode);
      if (msg != null) {
        _this.showToastText = msg; _this.showToast = true; return;
      }
      _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, true);
      _this.$http.post(RequestUrl.PLATFORM_INSURE_IMG, initData).then(function (res) {
        _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);
        if (res.state != 0) {
          _this.changeImgCode();//更换图形验证码
          _this.imgCode = "";//清空图形码
          _this.showToastText = res.result;
          _this.showToast = true;
          return;
        }
        let data = {
          _this: _this,
          msgData: {
            headerTitle: "信息提示",
            gaBackUrl: RouteUrl.INSURE_ONE,
            buttonUrl: RouteUrl.INSURE_ONE,//路由到第一步
            title: "申请成功",
            description: "",
            buttonsType: "primary",
            buttonsText: "返回",
          }
        }
        _this.$common.storeCommit(_this, Mutations.SET_MSG_DATA, data);
      });
    }
  },
  mounted() {
    document.title = "车险易";
    this.StrLenth = StrLenth; //字符长度常量
    this.$init.subPageInit(this);
  }
}
</script>

<style lang="scss">
.outermost {
  width: 100%;
  height: 100vh;
  background-color: #f0f8fb;
  .bg {
    width: 80%;
    margin: 0px auto;
  }
  .tile {
    width: 80%;
    height: 80px;
    font-size: 24px;
    text-align: center;
    padding-top: 30px;
    margin: 0px auto;
  }
  .bottom {
    padding: 10px 15px;
    .btn {
      margin: 20px auto;
    }
    .input {
      height: 20px;
      background-color: white;
      border: 1px solid #2ea2df;
      border-radius: 4px;
    }
    .weui-cell:before {
      border: 0px;
    }
    .weui-btn_primary {
      background-color: #2ea2df;
    }
  }
  .weui-wepay-flow__process {
    display: none;
    background-color: #2ea2df;
    height: 3px;
    position: relative;
  }

  .weui-wepay-flow {
    padding: 20px 30px 30px 30px;
    .weui-wepay-flow__bd {
      .weui-wepay-flow__li {
        width: 30px;
        height: 30px;
        .weui-wepay-flow__state {
          width: 30px;
          height: 30px;
          line-height: 30px;
          border-radius: 15px;
        }
        .weui-wepay-flow__state {
          background-color: #2ea2df;
        }
        .weui-wepay-flow__title-bottom {
          top: 40px;
          color: gray;
        }
      }
    }
  }

  //图形码
  .img__code {
    width: 80px;
    height: 31px;
    margin-left: 3px;
    vertical-align: middle;
  }

  //换一张图形码
  .img__code--change {
    margin-left: 3px;
    vertical-align: middle;
    font-size: 14px;
  }

  //获取验证码按钮
  .linkMobileCode {
    padding: 0px;
    width: 80px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    color: #C8161D;
    border: 1px solid #C8161D;
    background-color: white;
  }
}
</style>

